<template>
    <main class="scroll">
        <div class="surprise-header">
            <img :src="SurpriseHeader" alt="">
        </div>
        <div class="Surprise_Content">
            <div class="susidy_v2_hot">
                <div class="susidy_v2_hot-header">
                    <span style="font-size:1.2rem;">超值好货 </span><span>真划算 限量抢</span>
                </div> 
                <div class="contain">
                <ul class="susidy_v2_contain">
                   
                        <li v-for="(item,index) in susidy" :key="index">
                            <div>
                                <img :src="item.img" alt="">
                            </div>
                            <div style="margin-left:-.3125rem;">
                                <p class="susidy_text">{{item.text}}</p>
                                <span class="susidy_img"><span ><img src="https://img12.360buyimg.com/img/s24x24_jfs/t1/137282/11/2337/840/5ee8302cE8b677491/01fd295ec9a78fd5.png" alt=""></span>{{item.num}}</span>
                                <div class="susidy_wrap">
                                    <div style="padding:0rem;display:flex;justify-content: center;">已优惠￥{{item.discounts}}</div>
                                </div>
                                <div style="display:flex;align-item:center;height:1rem;padding:0rem;">
                                    <span class="price">￥{{item.price}}</span>
                                    <span class="priceimg"><img src="https://img30.360buyimg.com/img/s78x28_jfs/t1/176393/8/17024/5845/60d929d9E09365703/af24cdd8531a8ca6.png" alt=""></span>
                                </div>
                            </div>
                        </li> 
                    </ul>
                    </div>
               
            </div>
        </div>
    </main>
</template>
<script>
export default {
    name:'SurpriseHeader',
    data:()=>({
        'SurpriseHeader':'src/assets/images/surprise-header.jpg',
        'src':'https://img13.360buyimg.com/n1/jfs/t1/198096/36/13188/449979/6167f2ebEd4942531/68427a53680883eb.png',
        'susidy':[
            {
                img:'src/assets/images/susidy.png',
                text:'【百亿补贴】洁柔face古龙水香手帕纸4层18包奢华装 经典奢华装18包(1条)',
                num:'热卖2万+件',
                price:5.9,
                discounts:30
            },
            {
                 img:'src/assets/images/susidy1.jpg',
                text:'【百亿补贴】洁柔抽纸蓝面子3层110抽8包面巾纸餐巾纸卫生纸纸巾 8包',
                num:'热卖2000+件',
                price:11.9,
                discounts:8
            },
            {
                 img:'src/assets/images/susidy2.jpg',
                text:'【百亿补贴】维达卷纸批发超韧4层加厚无芯卷纸10卷30提装家用厕纸卫生纸 1提10卷',
                num:'热卖2万+件',
                price:8.9,
                discounts:11
            },
            {
                 img:'src/assets/images/susidy3.png',
                text:'【百亿补贴】洁柔太阳抽纸3层120抽6包面巾纸家用抽纸面巾纸实惠 6包',
                num:'热卖5000+件',
                price:7.9,
                discounts:22
            },
        ]
    })
}
</script>
<style scoped lang="less">
@w:23.4375rem;
@h:11.875rem;

.surprise-header{
    width: @w;
    height: @h;
    img{
        width: 100%;
        height: 100%;
    }
}
.Surprise_Content{
    width: @w - .625rem - .625rem-.125rem - .125rem;
   
    background: #FAFAFA;
    border-top-left-radius: .9375rem;
    border-top-right-radius:.9375rem;
    margin-top: -0.625rem - .0625rem*2;
    position: relative;
    z-index: 1;
    padding:.625rem+.125rem;
    padding-bottom: 0rem;
    .susidy_v2_hot{
        width: @w - 1.5625rem;
        height:9.5625rem;
        background: url('/src/assets/images/susidybackground.png') no-repeat;
        background-size: 100%;
    }
    .susidy_v2_hot-header{
        padding:.3125rem .625rem;
        color: #FAFAFA;
        font-size: .875rem;
        text-align: left;
    }
    .susidy_v2_contain{
        display: flex;
        overflow: scroll;
        width:21.5625rem;
        li{
            width: 12.5rem;
            height:6.5625rem;
            background: #FAFAFA;
            border-radius: .3125rem;
            font-size: .75rem;
            margin-right: .3125rem;
            display: flex;
            img{
                width: 5.3125rem;
                height: 5.3125rem;
            }
            div{
                padding:.625rem;
            }
            .priceimg{
                display: inline-block;
                width: 2.4375rem;
                height: .9375rem;
                padding: 5px;
                img{
                     width: 2.4375rem;
                    height: .9375rem;
                }
            }
            .susidy_text{
                font-size: .875rem;
                padding-top: .3125rem/2;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                line-height: .8rem;
                color: #333;
                font-weight: 700;
                width: 5.3125rem;
   
            }
            .susidy_img{
               color: #999;
               display: inline-block;
               padding-bottom: 1rem;
               margin-left: -.625rem;
                span{
                     padding-right: .3125rem;
                }
                img{
                    width: .53rem;
                    height: .53rem;
                }
            }
            .price{
                font-size: .875rem;
                color:#f81818 ;
                font-weight: 550;
                line-height: 1.5rem;
            }
            .susidy_wrap{
                width: 4.0625rem;
                height: 1.0625rem;
                border: .0625rem solid #f81818;
                color: #f81818;
                background: #fff0f0;
                padding: 0rem;
                border-radius:.3125rem ;
                position: relative;
                ::after{
                    content: "";
                position: absolute;
                bottom: -0.25rem;
                left: 1rem;
                display: inline-block;
                width: .375rem;
                height: .375rem;
                overflow: hidden;
                line-height: 0;
                font-size: 0;
                vertical-align: middle;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                background: #fff0f0;
                border-color: transparent #f81818 #f81818 transparent;
                border-style: solid;
                border-width: .0625rem;
                z-index: 4;

                }
            }
        }

    }
     .susidy_v2_contain::-webkit-scrollbar{
            display: none;
    }
    .contain{
        margin: 0rem .3125rem;
        width:20.9375rem ;
        height: 6.5625rem;
        border-radius:.3125rem;
        overflow: hidden;
    }
}
</style>